<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>巧恩</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/my.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />

		<style>
			.img-control {}
		</style>

		<script src="../js/mui.min.js"></script>

		<script src="../js/gallery_resize.js">
		</script>

		<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				$("#ttest").click(function(){
					alert("test");
				});
			});
		</script>
	</head>

	<body>
		<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：顶部菜单栏
        -->
		<header style="margin-top: 0px;">
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" style="margin-top: 13px;margin-right: 6px;margin-bottom: 6px;" href="#topPopover"></a>
		</header>

		<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：主体内容
        -->
		<div class="mui-content">
			<div class="pagebanner aboutus" style="height: 335px; background: url(images/pagebanner-aboutus.jpg);">
				<div class="container">
					<h3>About us</h3>
				</div>
			</div>

			<div style="min-height: 150px;position: relative;">
				<div style="position: absolute;top: 50%;-webkit-transform: translate(0,-50%);left: 0;right: 0;">
					<h4 align="center">关于我们</h2>
					<h5 align="center">content</h5>
				</div>
			</div>
			
			<div style="min-height: 150px;position: relative;">
				<div id="ttest" style="position: absolute;top: 50%;-webkit-transform: translate(0,-50%);left: 0;right: 0;">
					<h4 align="center">文案描述</h2>
					<h5 align="center">content</h5>
				</div>
			</div>

			<ul class="mui-table-view mui-grid-view">

				<li  class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control " style="border-radius: 50%;" src="../images/shuijiao.jpg">
						<div class="mui-media-body">item1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="../images/muwu.jpg">
						<div class="mui-media-body">item2</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="../images/cbd.jpg">
						<div class="mui-media-body">item3</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="img-control mui-media-object" style="border-radius: 50%;" src="../images/yuantiao.jpg">
						<div class="mui-media-body">item4</div>
					</a>
				</li>
			</ul>

			<div style="background: url(images/pagebanner-aboutus.jpg);min-height: 200px; text-align: center;position: relative;">
				<div class="container-center">
					<h3></h3>
				</div>
			</div>

			<div style="min-height: 200px; text-align: center;position: relative;background-color: lightgrey;">
				<h5 class="text-brife" style="top: 50%;left:0;right: 0;-webkit-transform: translate(0,-50%);position: absolute;">文字描述</h5>
			</div>

			<ul  style="padding: 0px;">

				<li class="mui-table-view-cell" style="padding: 0px;" >
					<a href="#">
						<img class="mui-media-object" src="../images/shuijiao.jpg">
					</a>
				</li>
			</ul>

			<h3 align="center" style="margin-top: 30px;">合作伙伴</h3>

			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="../images/ic_platform_douyu.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="../images/ic_platform_huajiao.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="../images/ic_platform_meipai.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>

				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
					<a href="#">
						<img class="mui-icon" style="width: 100%;" src="../images/ic_platform_miaopai.png">
						<div class="mui-media-body">title1</div>
					</a>
				</li>

			</ul>
			
			<form style="min-height: 200px;background-color: lightgray; position: relative;">
				<div style="position: absolute; top: 50%;left: 0;right: 0;">
					<h4 style="color: white;-webkit-transform: translate(0, -50%);" align="center">预约体验表格</h4>
				</div>
				</form>

				<div class="pagebanner aboutus" style="height: 200px;">
					<div class="container">
						<h5>联系我们</h5>
					</div>
				</div>

			</div>

			<!--
        	作者：754054708@qq.com
        	时间：2017-11-23
        	描述：标题右上方下拉的内容
        -->
			<div id="topPopover" class="mui-popover" style="width: 140px;">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a href="../index.html">首页</a>
							</li>
							<li class="mui-table-view-cell">
								<a href="subproject.html">巧恩课程</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!-- PageBanner /- -->
			<script type="text/javascript" charset="utf-8">
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui('.mui-scroll-wrapper').scroll();
				mui('body').on('shown', '.mui-popover', function(e) {
					//console.log('shown', e.detail.id);//detail为当前popover元素
				});
				mui('body').on('hidden', '.mui-popover', function(e) {
					//console.log('hidden', e.detail.id);//detail为当前popover元素
				});
			</script>
	</body>

</html>